<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>推荐资讯列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
               <el-button type="primary" round @click="urlAdd"><i class="el-icon-plus"> </i>&nbsp;&nbsp;新增推荐资讯</el-button>
                <div style="height:40px"></div>
                <el-table border :data="tableData"  style="width: 100%"   ref="multipleTable"  :span-method="objectSpanMethod">
                    <el-table-column prop="batch_no" label="批次号" width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="500" align="center">
                    </el-table-column>
                    <el-table-column label="封面图：" width="180" align="center">
                        <template slot-scope="scope" >
                            <div><img :src="scope.row.head_img" style="width:100%;"></div>
                        </template>
                    </el-table-column>
                      <el-table-column prop="create_time" label="创建时间" width="250" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center" >
                        <template slot-scope="scope" >
                            <!-- <el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                            <el-button class="del" size="small" type="text"  @click="handleDelete(scope.$index, scope.row)" >删除该组</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" v-show="totalPages>1">
                    <el-pagination v-if="paginationShow" @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                    </el-pagination>
                </div>
                
        </div>
        <!-- 弹出新增推荐资讯界面 -->
        <el-dialog title="新增推荐资讯" :visible.sync="addNews" width="600px" center>
             <el-form style="width:600px; margin:0 auto"  label-width="110px">
                <el-form-item label="推荐资讯ID：">
                    <el-input type="number" style="width:300px;" v-model="id1" auto-complete="off" min="0"  placeholder="请输入资讯的ID" ></el-input>
                </el-form-item>
                <el-form-item label="推荐资讯ID：">
                    <el-input type="number" style="width:300px;" v-model="id2" auto-complete="off" min="0" placeholder="请输入资讯的ID" ></el-input>
                </el-form-item>
                <el-form-item label="推荐资讯ID：">
                    <el-input type="number" style="width:300px;" v-model="id3" auto-complete="off" min="0" placeholder="请输入资讯的ID" ></el-input>
                </el-form-item>
                <el-form-item label="推荐资讯ID：">
                    <el-input type="number" style="width:300px;" v-model="id4" auto-complete="off" min="0" placeholder="请输入资讯的ID" ></el-input>
                </el-form-item>
                <el-form-item style="margin:0;color:#f56c6c;">注意：需要一次性设置一组（即4个）推荐资讯</el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addNews = false">取 消</el-button>
                <el-button type="primary" @click="subAddNews">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt" style="color:red">删除即删除一组(即4个)推荐资讯</div>
            <div class="del-dialog-cnt">且删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
        <!-- / 删除提示框 -->
    </div>
</template>
<script>
import {getNewsList,postDeleteNews,postAddNews} from '@/api/news'
export default {
    name:"recommendNewsList",
    data() {
        return {
            pageIndex:1,//当前页码
            pageSize:3,//每页3组  共12条
            totalElements:1,//默认的总条数
            totalPages:1,//默认的总页数
            paginationShow:true,//重新显示分页
            tableData:[],//表格数据
            delIndex:0, //当前选中的下标
            delId:0,  //当前要删除的Id
            delVisible:false, //默认dialog 不弹出
            title:'', //商品标题
            addNews:false,//新增推荐资讯提示框 默认隐藏false
            ids:[],//推荐资讯id数组
            id1:'',//资讯ID1
            id2:'',//资讯ID2
            id3:'',//资讯ID3
            id4:'',//资讯ID4
        }
    },
    //实例创建
    created(){
        //
        this.getDate();
    },
    //计算属性
    computed:{

    },
    //方法
    methods: {
        //获取数据
        getDate(){
            getNewsList(this.pageIndex).then((response)=> {
                console.log(response);
                if(response.code==200){
                    this.totalElements = response.data.total; //总条数
                    this.totalPages = Math.ceil(response.data.total/this.pageSize);//总页数

                    var data = response.data.list;//接收当前返回的数据(二维数组)
                    //重组数据
                    let newAry = [];//空数组接收重组后的数据
                    //遍历二维数组
                    for(let i=0;i<data.length;i++){
                        
                        for(let j = 0; j<data[i].length;j++){
                            let obj = {};//接收具体每一个对象数据
                            
                            obj.id = data[i][j].id;
                            obj.batch_no = data[i][j].batch_no;
                            obj.object_id = data[i][j].object_id;
                            obj.create_time = data[i][j].create_time;
                            obj.title = data[i][j].title;
                            obj.head_img = data[i][j].head_img;
                            obj.type = data[i][j].type;
                            obj.create_date = data[i][j].create_date;

                            newAry.push(obj);
                        }
                        
                    }
                    console.log(newAry)
                    this.tableData = newAry;
                 
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //合并表格的方法
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //第一列合并
            if (columnIndex === 0) {
                if (rowIndex % 4 === 0) {
                    return {
                    rowspan: 4,
                    colspan: 1
                    };
                } else {
                    return {
                    rowspan: 0,
                    colspan: 0
                    };
                }
            }
            //最后一列合并
            if (columnIndex === 5) {
                if (rowIndex % 4 === 0) {
                    return {
                    rowspan: 4,
                    colspan: 1
                    };
                } else {
                    return {
                    rowspan: 0,
                    colspan: 0
                    };
                }
            }
        },
        //新增推荐资讯
        urlAdd(){
            this.addNews  = true ;//显示新增推荐资讯界面
        },
        //确定提交新增推荐资讯
        subAddNews(){
            let _this = this;
            //判断都不能为空
            if(this.id1 == '' || this.id2 == '' || this.id3 == '' || this.id4 == ''){
                this.$notify.info({title: '提示',message: '请先将四个资讯ID填写完整'});
                return false;
            }else{
                this.ids = [];//先清空，防止多次添加
                this.ids.push(this.id1);//依次添加到数组中
                this.ids.push(this.id2);
                this.ids.push(this.id3);
                this.ids.push(this.id4);
                // console.log(this.ids)
                this.ids =  JSON.stringify(this.ids);//转化成json字符串数组格式
                // console.log(this.ids)
                let param ={}
                param.ids = this.ids;

                postAddNews(param).then(response=>{
                    if(response.code==200){
                        this.$message({
                            message: '恭喜你，新增成功',
                            type: 'success'
                        });
                        this.addNews =false;
                        setTimeout(function(){
                            //清空数据重载
                            _this.pageIndex = 1;
                            _this.id1 = '';
                            _this.id2 = '';
                            _this.id3 = '';
                            _this.id4 = '';
                            _this.paginationShow = false   //分页器消失
                            _this.$nextTick(function () {
                                //分页器重新加载 解决element 分页器的无法触发current-change事件 只限在tabs页 
                                _this.paginationShow = true  
                            })
                            _this.getDate();
                        },1500);

                    }else{
                        this.$notify.error({
                            title: '新增失败',
                            duration:2000,
                            message: '失败原因：'+response.msg
                        });
                    }
                }).catch(error=>{
                    console.log(error);
                });
            } 
           
        },
        //分页
        handleCurrentChange(val){
            this.pageIndex =val;
            this.getDate();
        },
        //删除
        handleDelete(index,row){
            // console.log(index,row);
            if(row.id && row.id>0){
                this.delIndex =index;//要删除的下标
                this.delId = row.batch_no; //要删除的ID
                this.delVisible = true; //显示删除提示框
            }else{
                // console.log("没触发");
            }
        },
        // 确定删除
        deleteRow(){
            let _this = this;
            if(this.delId>0){
                console.log(this.delId)
                postDeleteNews(this.delId).then(response=>{
                    if(response.code==200){
                        this.$message.success('删除成功');
                        this.delVisible = false;
                        setTimeout(function(){
                            //清空数据重载
                            // _this.pageIndex = 1;
                            // _this.paginationShow = false   //分页器消失
                            // _this.$nextTick(function () {
                            //     //分页器重新加载 解决element 分页器的无法触发current-change事件 只限在tabs页 
                            //     _this.paginationShow = true  
                            // })
                            _this.getDate();
                        },1500);
                    }else{
                        this.$notify.error({
                            title: '删除失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                })
            }
            
        }
        
    }
}
</script>
<style lang="stylus" scoped>
    .edit{
        color #ff9800;
    }
    .del{
        color #e51c23;
    }
    .download{
        color #67C23A;
    }
</style>


